import React, { PureComponent, createRef } from 'react'

class Counter extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  render() {
    return (
      <div>
        <h2>当前计数: {this.state.counter}</h2>
        <button onClick={e => this.increment()}>+1</button>
      </div>
    )
  }

  increment() {
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    
    this.titleRef = createRef();
    this.countRef = createRef();

    this.titleEl = null;
  }
  render() {
    return (
      <div>
        {/* 字符串（不推荐，后期可能会删除） */}
        <h2 ref="titleRef">Hello World</h2>

        {/* 目前React推荐的方式 */}
        <h2 ref={this.titleRef}>Hello World</h2>

        {/* 回调函数方式 */}
        <h2 ref={(arg => this.titleEl = arg)}>Hello World</h2>

        <button onClick={e => this.changeText()}>改变文本</button>

        <hr />
        <Counter ref={this.countRef}></Counter>
        <button onClick={e=>this.appBtnClick()}>App按钮</button>
      </div>
    )
  }
  changeText() {
    // 使用方式1：字符串（不推荐，后期可能会删除）
    // console.log(this.refs.titleRef);
    this.refs.titleRef.innerHTML = "你好"

    // 使用方式2：对象方式
    // console.log(this.titleRef.current);
    this.titleRef.current.innerHTML = "你好"

    // 使用方式3：回调函数方式
    // console.log(this.titleEl);
    this.titleEl.innerHTML = "你好"
    

  }
  appBtnClick() {
    console.log(this.countRef.current);
    this.countRef.current.increment()
    
  }
}
